{extend name="public/base" /}
{block name="head"}
{/block}
{block name="body"}
<div class="page-content" id="page-content">
<!--   <div class="top-content">
    <div class="page-title">
      <h5>筛选条件</h5>
    </div>
    <div class="search-box"></div>
  </div> -->
  <div class="main-content">
    <div class="page-title">
      <h5>导航栏列表</h5>
      <a href="{:Url('create')}" class="layui-btn layui-btn-small layui-btn-normal create-but">添加导航栏</a>
    </div>

    <div class="layui-form">
      <table class="layui-table layui-form">
        <thead>
          <tr>
            <th width="3%"><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
            <th width="6%">id</th>
            <th width="15%">导航名字</th>
            <th width="8%">地址</th>
            <th width="8%">排序</th>
            <th width="8%">是否展示</th>
            <th width="8%">操作</th>
          </tr> 
        </thead>
        <tbody>
          {volist name="list['data']" id="vo"}
            <tr data-id="{$vo.id}">
              <td><input type="checkbox" name="id[]" lay-skin="primary" value="{$vo.id}" ></td>
              <td>{$vo.id}</td>
              <td>{$vo.nav_name}</td>
              <td>{$vo.url}</td>
              <td>{$vo.sort}</td>
              <td class="status-text-{$vo.id}
              ">{$vo.status|conversion=['0'=>"不显示",'1'=>'显示']}</td>
              <td>
                <div class="layui-btn-group">
                  <span class="status-btn">
                    {if condition="$vo['status'] eq 1"}
                      <a class="layui-btn layui-btn-small layui-btn-danger change-status" onclick="changeStatus({$vo.id},0,this)">不显示</a>
                    {else /}
                      <a class="layui-btn layui-btn-small change-status" onclick="changeStatus({$vo.id},1,this)">显示</a>
                    {/if}
                  </span>

                  
                  
                  <a class="layui-btn layui-btn-normal layui-btn-small" href="{:Url('update',['id'=>$vo['id']])}">编辑</a>
                  <button class="layui-btn fuyun-btn-del layui-btn-small btn-del-id" data-url="{:Url('deleteAll')}" data-confirm="确定删除该商品吗？" data-successtip="删除成功！" data-id="<?=$vo['id']?>" ><i class="fa fa-close margin-right-5"></i>删除</button>
                </div>
              </td>
            </tr>
          {/volist}
        </tbody>
        <tfoot>
          <tr>
            <th width="2%"><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
            <th colspan="8" class="operator-button" style="text-align:left">
                <button class="layui-btn layui-btn-small fuyun-btn-del btn-del-ids" data-url="{:Url('deleteAll')}" data-confirm="确定要批量删除吗?" data-successtip="批量删除成功!"  method-type="post" style="margin-top:5px"><i class="fa fa-close margin-right-5"></i>批量删除</button>
            </th>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="page-box">
      <fuyun-page v-if="<?=ceil($list['totalRow']/$list['pageSize'])?> > 1"
        :pagesize="<?=$list['pageSize']?>" 
        :total = "<?=$list['totalRow']?>"
        :current-page = {$list['curPage']}
      ></fuyun-page>
    </div>

  </div>
</div>


<script type="text/javascript">
  layui.use([ 'layer','form'], function(){
    var layer = layui.layer;
    var form = layui.form();
    //全选
    form.on('checkbox(allChoose)', function(data){
        var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
        child.each(function(index, item){
            item.checked = data.elem.checked;
        });
        form.render('checkbox');
    });
  });

  fuyun.components(['page'],{
    el:"#page-content",
    data:{
      labelPosition: 'top',
    },
  });

  function changeStatus(id, status, obj){
    var confirm = status==1?"是否确定显示？":"是否确定不显示？";
    var layerDelIndex = layer.confirm(confirm, {
      btn: ['是','否'] //按钮
    }, function(){
      $.ajax({
        type:'post',
        url: "{:Url('changeStatus')}",
        data:{'id':id,'status':status},
        dataType:'json',
        success: function(data){
          if(data['status']==200){
            showStatus(id, status, obj);
            layer.msg(data['msg']);
            layer.close(layerDelIndex);
          }else{
            layer.msg(data['msg']);
          }

        }
      });
    }, function(){
      return;
    });

  }

  function showStatus(id, status = 0,obj){
    var status_0 = '<a class="layui-btn layui-btn-small layui-btn-danger change-status" onclick="changeStatus('+id+',0,this)">不显示</a>';
    var status_1 = '<a class="layui-btn layui-btn-small change-status"  onclick="changeStatus('+id+',1,this)">显示</a>';
    if(status == 1){
      $(obj).parent().html(status_0);
      $(".status-text-"+id).text("显示");
    }else{
      $(obj).parent().html(status_1);
      $(".status-text-"+id).text("不显示");
    }
  }

</script>

{/block}
